
<template>
  <div :id="props.isDisable ? 'org-tree-selection': ''">
    <a-tree
      :tree-data="treeData"
      :load-data="onLoadData"
      :fieldNames="{ title: 'name', key: 'departmentId', value: 'departmentId' }"
      v-model:expandedKeys="expandedKeys"
      v-model:selectedKeys="selectedKeys"
      v-model:checkedKeys="checkedKeys"
      :defaultExpandAll="true"
      @select="deviceSelect"
    >
      <template #title="{ name }">
        {{ name }}
      </template>
    </a-tree>

  </div>
</template>

<script setup>
import { reactive, ref, onMounted } from 'vue';
import { departmentApi } from '/@/api/system/department-api';
import { stationApi } from '/@/api/main/basic/station-api';

const props = defineProps({
  isDisable: {
    type: Boolean,
    default: false,
  },
  isInIt: {
    type: Boolean,
    default: false,
  },

});

const emit = defineEmits(['change']);

const expandedKeys = ref([]);
const selectedKeys = ref([]);
const checkedKeys = ref([]);
// ---------------------------- 数据初始化 ----------------------------
function resetValue(){
  checkedKeys.value = [];
  selectedKeys.value = [];
  // expandedKeys.value = [];
}
// 获取机列表与测站列表并整合成树
const treeData = ref([]);
// 获取机构
async function getDepartmentList(stationArr) {
  let departmentList = await departmentApi.queryDepartmentTree();
  expandedKeys.value = []
  departmentList.data.forEach((item) => {
    if(item.children && item.children.length > 0){
      expandedKeys.value.push(item.departmentId)
      item.children.forEach((child) => {
        if(child.children && child.children.length > 0){
          expandedKeys.value.push(child.departmentId)
        }
      })
    }
  })
  // 处理数据禁用
  if(props.isDisable){
    departmentList.data[0].disabled = true
    departmentList.data[0].children.forEach(item=>{
      if(item.children && item.children.length > 0){
        item.disabled = true
        item.children.forEach(el=>{
          el.disabled = true
        })

      }
    })
  }
  // 获取数据后是否回调
  if(props.isInIt){
    let obj = departmentList.data[0].children[0];
    deviceSelect(obj.departmentId,{selectedNodes:[obj]})
    selectedKeys.value = [obj.departmentId];
  }
  treeData.value = departmentList.data;
}

// 异步加载子节点数据
const onLoadData = (treeNode) => {
  return new Promise((resolve) => {
    if (treeNode.dataRef.children == null && treeNode.dataRef.type == 3) {
      stationApi.queryAllStation({ deptId: treeNode.dataRef.departmentId }).then((res) => {
        res.data.forEach((item) => {
          item.parentId = item.managementStationId;
          //   因机构表与测站表是两个表中的数据，为防止冲突，测站表中的id与机构表中的id冲突，所以测站表中的id需拼接父级id区分，以及增加type:4,来区分为测站类型
          item.departmentId = treeNode.dataRef.departmentId + '-' + item.id;
          item.type = 4;
        });
        treeNode.dataRef.children = res.data;
        treeData.value = [...treeData.value];
        resolve();
      });
      return;
    } else {
      resolve();
      return;
    }
  });
};

// 抛出函数
defineExpose({
  resetValue,
  getDepartmentList,
});

// ------------------------------ 树点击操作 --------------------------

// 点击左侧树
function deviceSelect(selectedKeys, selectedNodes) {
  let selectNode = selectedNodes.selectedNodes[0],
    obj = {};

  obj.selectedKeys = selectedKeys; // 选中的key
  obj.selectedNodes = selectedNodes; // 选中的节点

  // 判断选中的数据
  if (selectNode.type == 1) {
    // 灌溉处
    obj.type = 1 // 机构类型
  } else if (selectNode.type == 2) {
    // 灌区
    obj.areaId = selectNode.departmentId;
    obj.type = 2 // 机构类型
  } else if (selectNode.type == 3) {
    // 管理站
    obj.managementStationId = selectNode.departmentId;
    obj.type = 3 // 机构类型
  } else if (selectNode.type == 4) {
    // 测站
    obj.stationId = Number(selectNode.departmentId.split('-')[1]);
    obj.type = 4 // 机构类型
  }

  emit('change', obj);
}
</script>


<style>

  #org-tree-selection .ant-tree .ant-tree-treenode-disabled .ant-tree-node-content-wrapper{
    color: rgba(0, 0, 0, 0.88) !important;
  }
  #org-tree-selection .ant-tree .ant-tree-switcher .ant-tree-switcher-icon{
    line-height: 24px;
    padding-top: 3px;
    font-size: 18px;
  }
</style>
